<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电子图书管理系统</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/dayjs.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <style type="text/css">
        #root{
            width: 100%;
        }
        .all{
            width: 70%;
            margin: 0 auto;
        }
        .all .top{
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
        }
        .all .middle{
            border: 2px solid #333;
        }
        .all .middle .table{
            border: 1px solid #333;
            width: 100%;
        }
        td{
            text-align: center;
        }

        .footer{
            text-align: right;
        }
        .bg{
            background-color: lightgreen;
        }
        .no-all{
            cursor: not-allowed;
            color: #ccc;
        }
    </style>
</head>
<body>
    <div id="root">
        <div class="all">
            <div class="top">
                <span>
                    <span>图书分类:</span>
                    <select v-model="cid">
                        <option value="-1">全部</option>
                        <option :value="obj.id" v-for="(obj,index) in categoryList" :key="obj.id">{{obj.name}}</option>
                    </select>&nbsp;&nbsp;
                    <button @click="searchHandler">查询</button>
                </span>
                <button @click="goAdd">新增电子图书</button>
            </div>
            <div class="middle">
                <h2 style="text-align: center">电子图书列表</h2>
                <table class="table" border="1">
                    <thead>
                        <tr style="background-color: #ccc">
                            <th style="width: 10%">图书编号</th>
                            <th style="width: 20%">图书名称</th>
                            <th style="width: 40%">图书摘要</th>
                            <th style="width: 10%">上传人</th>
                            <th style="width: 10%">上传时间</th>
                            <th style="width: 10%">操作</th>
                        </tr>
                    </thead>
                    <tbody v-if="!lodded">
                        <tr>
                            <th colspan="6">lodding...</th>
                        </tr>
                    </tbody>
                    <tbody v-if="lodded && bookBean.list.length === 0">
                        <tr>
                            <th colspan="6">暂时没有数据!</th>
                        </tr>
                    </tbody>
                    <tbody v-if="lodded && bookBean.list.length > 0">
                        <tr v-for="(obj,index) in bookBean.list" :key="obj.id" :class="index % 2 == 0 ? 'bg':''">
                            <td>{{obj.id}}</td>
                            <td>{{obj.title}}</td>
                            <td>{{obj.summary}}</td>
                            <td>{{obj.uploaduser}}</td>
                            <td>{{obj.createdate | dataFormat}}</td>
                            <td>
                                <a href="#" @click.prevent="goUpdate(obj.id)">修改</a>
                                <a href="#" @click.prevent="deleteBook(obj.id)">删除</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <hr/>
            <div class="footer">
                <span v-show="lodded">
                    <a href="#" v-if="bookBean.pageNum != 1 && bookBean.pages > 0" @click.prevent="getbook(1)">首页&nbsp;|</a>
                    <a href="javascript:void(0)" v-if="lodded && bookBean.pageNum == 1" class="no-all">首页&nbsp;|</a>
                    <a href="#" v-if="bookBean.pageNum != 1 && bookBean.pages > 0" @click.prevent="getbook(bookBean.pageNum-1)">上一页&nbsp;|</a>
                    <a href="javascript:void(0)" v-if="lodded && bookBean.pageNum == 1" class="no-all">上一页&nbsp;|</a>
                    <a href="#" v-if="bookBean.pageNum != bookBean.pages && bookBean.pages > 0" @click.prevent="getbook(bookBean.pageNum+1)">下一页&nbsp;|</a>
                    <a href="javascript:void(0)" class="no-all" v-if="lodded && bookBean.pageNum == bookBean.pages && bookBean.pages > 0">下一页&nbsp;|</a>
                    <a href="#" v-if="bookBean.pageNum != bookBean.pages && bookBean.pages > 0" @click.prevent="getbook(bookBean.pages)">末页&nbsp;&nbsp;</a>
                    <a href="javascript:void(0)" class="no-all" v-if="lodded && bookBean.pageNum == bookBean.pages && bookBean.pages > 0" >末页&nbsp;&nbsp;</a>
                    第{{bookBean.pageNum}}页/共{{bookBean.pages}}页
                </span>
                <span v-show="!lodded">
                    lodding...
                </span>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        Vue.filter('dataFormat',function(value,format='YYYY-MM-DD'){
            return dayjs(value).format(format);
        })
        new Vue({
            el:'#root',
            data(){
                return {
                    bookBean : {},
                    categoryList : [],
                    cid : -1,
                    lodded : false
                }
            },
            mounted(){
                // 加载分类
                this.initCate();
                // 初次加载图书
                this.getbook();
            },
            methods:{
                // 加载分类
                async initCate(){
                    let resp = await axios.get('http://localhost:8080/bookManagerSys/category/list');
                    let result = resp.data;
                    if(result.code === 200){
                        this.categoryList = result.data;
                    }else{
                        alert(result.msg);
                    }
                },

                // 获取图书
                async getbook(pageNum=1,pageSize=5){
                    const {cid} = this;
                    this.lodded = false;
                    let resp = await axios.get(`/bookManagerSys/book/list/${pageNum}/${pageSize}/${cid}`);
                    let result = resp.data;
                    if(result.code === 200){
                        this.bookBean = result.data;
                        this.lodded = true;
                    }else{
                        alert(result.msg);
                    }
                },
                // 查询
                searchHandler(){
                    this.getbook();
                },
                // 删除
                async deleteBook(id){
                    if(window.confirm("确认删除?")){
                        let resp = await axios.delete(`/bookManagerSys/book/delete/${id}`);
                        let result = resp.data;
                        if(result.code === 200){
                            alert(result.msg);
                            this.getbook();
                        }else{
                            alert(result.msg);
                        }
                    }
                },
                // 去添加
                goAdd(){
                    location.href = "add.html";
                },
                //
                goUpdate(id){
                    location.href = `update.html?id=${id}`;
                }
            }
        })
    </script>
</body>
</html>